<template>
  <div class="goods app-container" :loading="!userStore.isSupplier">
    <div class="card-box">
      <div class="header-box">
        <div class="header-top">
          <el-button size="default" type="primary" icon="Plus" @click="onAddGoods">
            发布商品
          </el-button>
        </div>
      </div>
    </div>
    <div class="card-box">
      <el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="图片" align="center">
          <template #default="{ row }">
            <img class="goods-pic" :src="row.image_url" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品" width="300">
          <template #default="{ row }">
            <div>{{ row.name }}</div>
            <div v-if="row.uom" class="goods-info">单位：{{ row.uom.name }}</div>
            <!--            <div class="goods-info" v-if="row.barcode">条形码：{{ row.barcode }}</div>-->
          </template>
        </el-table-column>
        <el-table-column label="成本价">
          <template #default="{ row }">
            <span>￥{{ row.default_variant ? row.default_variant.stand_price : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运费">
          <template #default="{ row }">
            <span>￥{{ row.express_amount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="零售价/指导价" width="200">
          <template #default="{ row }">
            <div>￥{{ row.default_variant ? row.default_variant.sale_price : 0 }}</div>
            <div>￥{{ row.default_variant ? row.default_variant.guiding_price : 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="品牌">
          <template #default="{ row }">
            <span v-if="row.brand">{{ row.brand.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商" width="120">
          <template #default="{ row }">
            <span v-if="row.supplier">{{ row.supplier.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template #default="{ row }">
            <span v-if="row.supplier">
              {{ row.default_variant ? row.default_variant.stock : 0 }}
              <span v-if="row.uom">/{{ row.uom.name }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              icon="edit"
              link
              size="small"
              @click="handleOpenDialog(scope.row.id)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.size"
          background
          :page-sizes="[10, 20, 30, 40]"
          :size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Goods",
  inheritAttrs: false,
});
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import GoodsAPI, { GoodsQueryForm, GoodsPageVO } from "@/api/goods/goods";
import { useUserStore } from "@/store";
import type { ComponentSize } from "element-plus";

const userStore = useUserStore();
const router = useRouter();
const params = reactive<GoodsQueryForm>({
  supplier__in: userStore.supplierInfo.id,
  page: 1,
  size: 10,
});
const pageData = ref([]);
const categoriesData = ref([]);
const size = ref<ComponentSize>("default");
const total_count = ref(0);
const loading = ref(false);

const multipleSelection = ref<GoodsPageVO[]>([]);
const handleSelectionChange = (val: GoodsPageVO[]) => {
  multipleSelection.value = val;
};

const handleSizeChange = (val: number) => {
  params.size = val;
  handleQuery();
};
const handleCurrentChange = (val: number) => {
  params.page = val;
  handleQuery();
};
/** 查询 */
function handleQuery() {
  if (!userStore.isSupplier) {
    ElMessageBox.alert("您当前尚未认证供应商身份，快去认证吧~", "认证提示", {
      confirmButtonText: "去认证",
      callback: (action: any) => {
        if (action == "confirm") {
          router.push({ name: "Profile" });
        }
      },
    });
    return;
  }
  getCategories();
  loading.value = true;
  GoodsAPI.getPage(params)
    .then((data: any) => {
      pageData.value = data.records;
      total_count.value = data.total_count;
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
}

function getCategories() {
  // GoodsAPI.getCategories({all: 1}).then((data) => {
  //   categoriesData.value = data;
  // })
}

/** 重置查询 */
function handleResetQuery() {
  params.page = 1;
  handleQuery();
}

function onAddGoods() {
  if (userStore.isSupplier) {
    router.push("/goods/add");
  } else {
    ElMessageBox.alert("您当前尚未认证供应商身份，快去认证吧~", "认证提示", {
      confirmButtonText: "去认证",
      callback: (action: any) => {
        if (action == "confirm") {
          router.push({ name: "Profile" });
        }
      },
    });
  }
}

function handleDelete(id: string) {}

function handleOpenDialog(id: string) {
  router.push("/goods/add?id=" + id);
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped lang="scss">
.goods {
  .card-box {
    padding: 15px;
    background-color: #ffffff;
    margin-bottom: 10px;
    border-radius: 10px;

    .header-box {
      .header-top {
        margin-bottom: 10px;
      }

      .form-group {
        //box-sizing: border-box;
        //width: 100%;
        //height: 32px;
        //border: 1px solid #dcdfe6;
        //border-radius: 4px;
        display: flex;
        align-items: center;
        //margin-bottom: 10px;

        .form-key {
          //border-radius: 4px 0 0 4px;
          //height: 30px;
          width: 100px;
          line-height: 30px;
          text-align: right;
          font-size: 14px;
          //color: #606266;
          //background-color: #f5f7fa;
        }

        .form-price {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .price-input {
            text-align: center;
            width: 40%;
            height: 30px;
            flex: 1;
            border: none;
            outline: none;
            box-shadow: none;
            -webkit-appearance: none;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }

    .goods-pic {
      width: 80px;
      height: 80px;
      border-radius: 6px;
    }

    .goods-info {
      font-size: 12px;
    }
  }
}
</style>
